<template>
  <div id="app">
         <el-menu
        :default-active="this.$route.path"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        :router="true"
        active-text-color="#ffd04b">
        <el-menu-item index="/">处理中心</el-menu-item>
        <el-menu-item   index="/about" > 虚拟机信息 </el-menu-item>
        <el-menu-item index="/leftTree"> 订单管理 </el-menu-item>
      </el-menu>
        <router-view/>
  </div>
</template>
<script>
export default {
  data(){
    return {
      activeIndex:'/'
    }
  },
  watch:{

  },
  methods:{
    handleSelect(routePath) {
      console.log(routePath)
      // 路由跳转时，标记在导航的那个选项下对应的路由
      // this.activeIndex = this.$route.path
    },
  }
}
</script>

<style>

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}


html, body, #app, .el-container {
 /*统一设置高度为100%*/
 height: 100%;
}


</style>
